import React from 'react'
import { Table, Space, Button, Popconfirm } from 'antd'
// import React, { Component } from 'react'

// import './index.less'

//使用函数组件来发请求及处理页码变化
export default function CustomTable({setEditMessage,total,pageSize,dataSource,onPageChange,page,onDelete}) {
  const columns = [
    {
      title: '编号',
      dataIndex: 'index',
      render: (text,record,index) => <span>{index+1}</span>
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '性别',
      dataIndex: 'sex',
    },
    {
      title: '身份证号',
      dataIndex: 'cid',
    },
    {
      title: '地址',
      dataIndex: 'address',
    },
    {
      title: '到访时间',
      dataIndex: 'createAt',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button type="primary" onClick={()=>{
                setEditMessage(record)
              }}>修改</Button>
          <Popconfirm 
          title="是否删除？"
          onConfirm={() => {
            onDelete(record._id)
            // 删除成功后，需要将表格数据源对应数据项删除
            // TODO...
          }}
          okText="是"
          cancelText="否">
            <Button type="primary" danger >删除</Button>
          </Popconfirm>
          
        </Space>
      ),
    },
  ]
//渲染列表数据  
 
 
  
 
  return (
    <div>
        
        <Table 
          columns={columns} 
          dataSource={dataSource}
          bordered
          pagination={
            { 
            showSizeChanger: true,
            onChange:onPageChange,
            pageSize,
            page,
            total,
            pageSizeOptions:[5,10,20,50]
            }
           }
          rowKey="_id"
        />
    </div>
  )
}

//使用类组件来发请求及处理页码变化
// export default class CustomTable extends Component {
//   state={
//     data:[]
//   }
//   //初始化页面，发请求
//   componentDidMount=()=>{
//     getMessages()
//     .then(res=>{
//       this.setState({
//         data:res.list
//       })
//     })
//   }
//   render() {
//     return (
//       <div>
//         <Table 
//         columns={columns} 
//         dataSource={this.state.data}
//         bordered
//         pagination={
//           {
            
//           showSizeChanger: true}
//         }
//         rowKey="_id"
//         />
//       </div>
//     )
//   }
// }

